<template>
  <section class="card">
    <h2>🖼️ 生成结果</h2>
    <div class="grid">
      <figure v-for="img in images" :key="img.panelId" class="thumb">
        <img :src="img.url" :alt="img.panelId" />
        <figcaption class="muted">{{ img.panelId }}</figcaption>
      </figure>
    </div>
  </section>
</template>
<script setup>
import { computed } from 'vue';
import { useStore } from '../stores/useStore';
const store = useStore();
const images = computed(()=>store.images);
</script>
<style>
.card{border:1px solid #e6e6eb;border-radius:20px;padding:14px;background:#fff;margin-bottom:12px;box-shadow:0 12px 30px rgba(45,17,83,.06)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.thumb{border:1px solid #e6e6eb;border-radius:12px;padding:6px;background:#fff}
.thumb img{width:100%;display:block;border-radius:8px}
.muted{color:#6e6e73;font-size:12px;text-align:center}
</style>
